@import './variable.scss';
@import './flex.scss';
@import './iconfont.scss';
@import './mixins.scss';

// 边距
.mt-mild {
  margin-top: $mild-space;
}
.ml-mild {
  margin-left: $mild-space;
}
.mr-mild {
  margin-right: $mild-space;
}
.mx-mild {
  margin-left: $mild-space;
  margin-right: $mild-space;
}
.padding-mild {
  padding: $mild-space;
}
.px-mild {
  padding-left: $mild-space;
  padding-right: $mild-space;
}
.py-mild {
  padding-top: $mild-space;
  padding-bottom: $mild-space;
}
.pt-mild {
  padding-top: $mild-space;
}
.pl-mild {
  padding-left: $mild-space;
}
.pr-mild {
  padding-right: $mild-space;
}
.pb-mild {
  padding-bottom: $mild-space;
}

.mt-mini {
  margin-top: $mini-space;
}
.ml-mini {
  margin-left: $mini-space;
}
.mr-mini {
  margin-right: $mini-space;
}
.mx-mini {
  margin-left: $mini-space;
  margin-right: $mini-space;
}
.my-mini {
  margin-top: $mini-space;
  margin-bottom: $mini-space;
}
.padding-mini {
  padding: $mini-space;
}
.px-mini {
  padding-left: $mini-space;
  padding-right: $mini-space;
}
.py-mini {
  padding-top: $mini-space;
  padding-bottom: $mini-space;
}
.pt-mini {
  padding-top: $mini-space;
}
.pl-mini {
  padding-left: $mini-space;
}
.pr-mini {
  padding-right: $mini-space;
}
.pb-mini {
  padding-bottom: $mini-space;
}

.mt-small {
  margin-top: $small-space;
}
.ml-small {
  margin-left: $small-space;
}
.mr-small {
  margin-right: $small-space;
}
.mx-small {
  margin-left: $small-space;
  margin-right: $small-space;
}
.padding-small {
  padding: $small-space;
}
.px-small {
  padding-left: $small-space;
  padding-right: $small-space;
}
.py-small {
  padding-top: $small-space;
  padding-bottom: $small-space;
}
.pt-small {
  padding-top: $small-space;
}
.pl-small {
  padding-left: $small-space;
}
.pr-small {
  padding-right: $small-space;
}
.pb-small {
  padding-bottom: $small-space;
}

.mt-little {
  margin-top: $little-space;
}
.mb-little {
  margin-bottom: $little-space;
}
.ml-little {
  margin-left: $little-space;
}
.mr-little {
  margin-right: $little-space;
}
.mx-little {
  margin-left: $little-space;
  margin-right: $little-space;
}
.my-little {
  margin-top: $little-space;
  margin-bottom: $little-space;
}
.padding-little {
  padding: $little-space;
}
.px-little {
  padding-left: $little-space;
  padding-right: $little-space;
}
.py-little {
  padding-top: $little-space;
  padding-bottom: $little-space;
}
.pt-little {
  padding-top: $little-space;
}
.pl-little {
  padding-left: $little-space;
}
.pr-little {
  padding-right: $little-space;
}
.pb-little {
  padding-bottom: $little-space;
}

.mt-petty {
  margin-top: $petty-space;
}
.mb-petty {
  margin-bottom: $petty-space;
}
.ml-petty {
  margin-left: $petty-space;
}
.mr-petty {
  margin-right: $petty-space;
}
.mx-petty {
  margin-left: $petty-space;
  margin-right: $petty-space;
}
.padding-petty {
  padding: $petty-space;
}
.px-petty {
  padding-left: $petty-space;
  padding-right: $petty-space;
}
.py-petty {
  padding-top: $petty-space;
  padding-bottom: $petty-space;
}
.pt-petty {
  padding-top: $petty-space;
}
.pl-petty {
  padding-left: $petty-space;
}
.pr-petty {
  padding-right: $petty-space;
}
.pb-petty {
  padding-bottom: $petty-space;
}

.mt-big {
  margin-top: $big-space;
}
.ml-big {
  margin-left: $big-space;
}
.mr-big {
  margin-right: $big-space;
}
.mx-big {
  margin-left: $big-space;
  margin-right: $big-space;
}
.my-big {
  margin-top: $big-space;
  margin-bottom: $big-space;
}
.padding-big {
  padding: $big-space;
}
.px-big {
  padding-left: $big-space;
  padding-right: $big-space;
}
.py-big {
  padding-top: $big-space;
  padding-bottom: $big-space;
}
.pt-big {
  padding-top: $big-space;
}
.pl-big {
  padding-left: $big-space;
}
.pr-big {
  padding-right: $big-space;
}
.pb-big {
  padding-bottom: $big-space;
}
.mt-heavy {
  margin-top: $heavy-space;
}
.mb-heavy {
  margin-bottom: $heavy-space;
}
.ml-heavy {
  margin-left: $heavy-space;
}
.mr-heavy {
  margin-right: $heavy-space;
}
.mx-heavy {
  margin-left: $heavy-space;
  margin-right: $heavy-space;
}
.my-heavy {
  margin-top: $heavy-space;
  margin-bottom: $heavy-space;
}
.padding-greater {
  padding: $greater-space;
}
.px-greater {
  padding-left: $greater-space;
  padding-right: $greater-space;
}
.py-greater {
  padding-top: $greater-space;
  padding-bottom: $greater-space;
}
.pt-greater {
  padding-top: $greater-space;
}
.pl-greater {
  padding-left: $greater-space;
}
.pr-greater {
  padding-right: $greater-space;
}
.pb-greater {
  padding-bottom: $greater-space;
}
.mt-huge {
  margin-top: $huge-space;
}
.pb-huge {
  padding-bottom: $huge-space;
}
.padding-heavy {
  padding: $heavy-space;
}
.px-heavy {
  padding-left: $heavy-space;
  padding-right: $heavy-space;
}
.py-heavy {
  padding-top: $heavy-space;
  padding-bottom: $heavy-space;
}
.pt-heavy {
  padding-top: $heavy-space;
}
.pl-heavy {
  padding-left: $heavy-space;
}
.pr-heavy {
  padding-right: $heavy-space;
}
.pb-heavy {
  padding-bottom: $heavy-space;
}
// 文字
.bigger-font {
  font-size: $bigger-size;
}
.huge-font {
  font-size: $huge-size;
}
.greater-font {
  font-size: $greater-size;
}
.heavy-font {
  font-size: $heavy-size;
}
.big-font {
  font-size: $big-size;
}
.little-font {
  font-size: $little-size;
}
.mini-font {
  font-size: $mini-size;
}
.mild-font {
  font-size: $mild-size;
}

.text-black {
  color: $textBlack;
}
.text-grey {
  color: $textGrey;
}
.text-light {
  color: $textLight;
}
.text-bright {
  color: $textBright;
}
.text-white {
  color: $textWhite;
}
.text-yellow {
  color: $yellow;
}
.text-warn {
  color: $warn;
}
.text-red {
  color: $red;
}
.text-safe {
  color: $safeColor;
}

.text-bold {
  font-weight: bold;
}
.text-bold500 {
  font-weight: 500;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-underline {
  text-decoration: underline;
}
.text-through {
  text-decoration: line-through;
}
.word-wrap {
  word-break: break-all;
}
.word-normal {
  word-break: normal;
}
.nowrap {
  word-break: keep-all;
  white-space: nowrap;
}
.hover-text {
  opacity: 0.8;
}

.line-limit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp1 {
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-clamp2 {
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-clamp3 {
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overflow-hidden {
  overflow: hidden;
}
// 尺寸
.width-full {
  width: 100%;
}
.height-full {
  height: 100%;
}
// 圆角
.radius-mini {
  border-radius: 8rpx;
}
.radius-small {
  border-radius: 12rpx;
}
.radius-little {
  border-radius: 16rpx;
}
.radius-petty {
  border-radius: 20rpx;
}
.radius-big {
  border-radius: 24rpx;
}
.radius-heavy {
  border-radius: 30rpx;
}
.radius-huge {
  border-radius: 40rpx;
}
// 定位
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.mini-level {
  z-index: 5;
}
.little-level {
  z-index: 10;
}
// 背景色
.bg-white {
  background-color: $textWhite;
}
// 按钮默认样式
.button-reset {
  padding: unset;
  line-height: unset;
  border-radius: 0rpx;
  background-color: white;
  // 按钮点击态颜色
  // -webkit-tap-highlight-color: unset;
  &::after {
    border-radius: 0rpx;
  }
}
// 扩大点击范围
.click-area {
  position: relative;
  &::after {
    content: '';
    width: 150%;
    height: 150%;
    background-color: transparent;
    @include absolute-center();
  }
}
// 保存按钮
.save-btn {
  width: 100%;
  height: 98rpx;
  line-height: 98rpx;
  font-size: $huge-size;
  color: $textWhite;
  text-align: center;
  border-radius: 100rpx;
  background-color: $saveBtn;
}
// 是否占位
.occupy {
  height: 146rpx;
  &.iPhoneX {
    height: 182rpx;
  }
}
// 线
.line-top {
  position: relative;
  &::before {
    content: '';
    width: 100%;
    height: 1rpx;
    background-color: rgba(0, 0, 0, 0.08);
    position: absolute;
    top: 0;
    left: 0;
  }
}
